<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>九宫架</title>
<style type="text/css">
.abc{
    width:400px;/*设置盒子的长度*/
	height:400px;/*设置盒子的宽度*/
	margin:auto;/*设置盒子相对于显示屏居中*/
	}
span{
     background-color:orange;/*设置盒子里面方块颜色为橙色*/
     width:30%;/*设置方块的宽度，为盒子长度的30%*/
	 height:30%;/*设置方块的高度，为盒子高度的30%*/
	 margin-right:5px;%;/*设置方块与方块间的横向距离，为5像素*/
	 margin-bottom:5px;/*设置方块与方块间的纵向距离，为5像素*/
	 border-radius:10px;/*设置方块的圆角，为10像素*/
	 float:left;/*设置方块为浮动模型，并且自左向右自动排列*/
	 display:block;/*设置方块的块级元素，这样方块的高度宽度均可进行设置，并且自上而下进行延伸*/
	 }	
</style>
</head>
<body>
<div class="abc"><!--设置盒子-->
    <span></span><!--设置方块-->
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
</div>

</body>
</html>
